<template>
  <div class="wraper">
    <div class="scroll_header" id="scroll_header"></div>
    <div class="index_header" @click="Opencity">{{currentrecharge}}</div>
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item,index) of list" v-bind:key=index><img :src=item.picurl  width="100%"/></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import request from '@/utils/request'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { loadBanner } from '@/api/allapis'
export default{
  name: 'HomeSwiper',
  data:function(){
    return{
      swiperOption:{
        pagination:'.swiper-pagination',
        loop:true,       
      },
      list:'',//获取的图片列表
      currentrecharge:'洛阳'
    }
  },
  methods:{
     getData() {
      // alert(this.listQuery)
      loadBanner().then(response => {
        // this.pages = response.data.totalpages
        // console.log(response.data)
        this.list = response.data.list
        // this.listLoading = false
      })
    },
    Opencity(){
      this.$router.push({
        name:'City'
      })
    },
    headerScroll:function(){
      window.onscroll = function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        var opacityObj = scrollTop/200
        var headerScrollObj = document.getElementById('scroll_header')
        headerScrollObj.style.opacity = opacityObj
      }
    },
  },  
  mounted(){
      this.getData()
      this.headerScroll()
  }
 
}
</script>
<style scoped>
.home{
  font-size:50px;

}
.wraper{
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 42%
}
</style>


